<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>球形冲击波</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li {
            list-style: none;
        }
        body {
            position: relative;
            height: 100vh;
            background-blend-mode: lighten;

            background-image:
                    radial-gradient(ellipse at 45% 50%, #273149, #0a0c10 70%);
            overflow: hidden;
        }

        /*.bc {*/
            /*position: absolute;*/
            /*top: 0;*/
            /*left: 0;*/
            /*height: 100vh;*/
            /*width: 100%;*/
            /*!*background: radial-gradient(ellipse at 45% 50%, rgba(255,255,255,0), #13163d 70%);*!*/
            /*background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);*/
            /*background-size: 1px 10px;*/
            /*filter: blur(50px);*/
            /*!*transform: translate3d(-25%, -25%, 0);*!*/
            /*border-radius: 50%;*/
        /*}*/

        #wrap {
            position: relative;
            top: 40%;
            left: 40%;
            transform-style: preserve-3d;
            transform: rotateX(46deg) rotateY(69deg);
            animation: myRotate 10s linear infinite;
        }
        @keyframes myRotate{
            0% {
                transform: rotateX(0) rotateY(0);
            }
            30% {
                transform: rotateX(180deg) rotateY(100deg);
            }
            60% {
                transform: rotateX(270deg) rotateY(180deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        .boll {
            position: absolute;
            top: 0;
            left: 0;
            transform-style: preserve-3d;
            transform: rotateX(0deg) rotateY(0deg);
        }
        .boll li {
            position: absolute;
            box-sizing: border-box;
            border-radius: 50%;
            border: 1.5px dashed #39eaeb;/*dashed*/
            transform-style: preserve-3d;
        }
        .boll li:before {
            content: '';
            position: absolute;
            display: block;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            width: 2.8em;
            height: 2.8em;
            margin: -1.4em;
            transform: translateZ(0.3em);
            border: 1px solid #00bcff;
            box-sizing: border-box;
            box-shadow: 0 0 0.8em #38c6ff inset,0 0 0.3em #66d2ff;
            /*background: radial-gradient(closest-corner,rgba(255, 255, 255, 0) 0% , rgb(144, 238, 254) 100%);*/
        }
        .boll li:after {
            content: '';
            position: absolute;
            display: block;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            width: 1.6em;
            height: 1.6em;
            margin: -0.8em;
            transform: translateZ(-1.5em);
            border: 1px solid #00ecff;
            box-sizing: border-box;
            box-shadow: 0 0 1em #41ecff inset,0 0 0.8em #86ebff;
            /*background: radial-gradient(closest-corner,rgba(255, 255, 255, 0) 0% , rgb(218, 221, 255) 100%);*/
        }
        .boll li>div{
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            border: 1px solid #0284ff;
            box-sizing: border-box;
            box-shadow: 0 0 1em #3eafff inset,0 0 1em #3eafff;
            background: radial-gradient(closest-corner,rgba(255, 255, 255, 0) 0% , rgb(2, 132, 255) 100%);
            transform-style: preserve-3d;
        }
        .boll li>div:before {
            content: '';
            position: absolute;
            display: block;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            width: 2.8em;
            height: 2.8em;
            margin: -1.4em;
            border: 1px solid #0b6aff;
            box-sizing: border-box;
            box-shadow: 0 0 1.5em #327aff inset,0 0 1em #518cff;
            /*background: radial-gradient(closest-corner,rgba(255, 255, 255, 0) 0% , rgb(23, 54, 179) 100%);*/
            transform: translateZ(2em);
        }
        .boll li>div:after {
            content: '';
            position: absolute;
            display: block;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            width: 1.6em;
            height: 1.6em;
            margin: -0.8em;
            box-sizing: border-box;
            border: 1px solid #2410ff;
            box-shadow: 0 0 1.5em #3d39ff inset,0 0 1em #6f6eff;
            /*background: radial-gradient(closest-corner,rgba(255, 255, 255, 0) 0%, rgb(93, 86, 235) 100%);*/
            transform: translateZ(4em);
        }


    </style>
</head>
<body>
<div id="wrap">
    <!--<ul class="boll boll-1">-->
        <!--<li></li>-->
    <!--</ul>-->
</div>
<div class="bc"></div>

<script>
    var wrap = document.getElementById('wrap');
    var num = 0;  //半径，边长，角度,普通数量标记

    createBoll(70,8);
    createBoll(70,8);
    function createBoll(radius,amount) {
        var angle= 360/amount;
        var side = radius * Math.tan(Math.PI/180 * angle/2) * 2 *(1 + Math.sqrt(2)); //边长计算
        var high = radius * Math.tan(Math.PI/180 * angle/2);

        var rotate;  //存储旋转方向
        wrap.style.width = side+'px';
        wrap.style.height = side+'px';

        var oUl = document.createElement('ul');
        oUl.className = 'boll boll' + num;
        oUl.style.width = side+'px';
        oUl.style.height = side+'px';
        num++;
        wrap.appendChild(oUl);

        //Y轴的一圈
        for (var i = 0; i < 8; i++) {
            rotate = 'rotateY('+ angle*i +"deg)";
            createLi(oUl,side,rotate,radius,high)
        }
        //X轴转一圈
        for (var j = 0; j < 8; j++) {
            if(j == 0 || j == 4) { continue; }
            rotate = 'rotateX('+ angle*j +"deg)";
            createLi(oUl,side,rotate,radius,high);
        }
        //Y先转90°，X轴在转
        for (var n = 0; n < 8; n++) {
            if(n == 0 || n == 2 || n == 4 || n == 6) {
                continue;
            }
            rotate = 'rotateY(90deg) rotateX('+ angle*n +"deg)";
            createLi(oUl,side,rotate,radius,high);
        }


    }
    //生产每一个面
    function createLi(ele,side,rotate,radius,high) {
        var oLi = document.createElement('li');
        oLi.style.width = side+'px';
        oLi.style.height = side+'px';
        oLi.style.transform = rotate +" translateZ(" +radius+ 'px)';
        ele.appendChild(oLi);

        var oDiv = document.createElement('div');
        oDiv.style.width = side/1.9+'px';
        oDiv.style.height = side/1.9+'px';
        oDiv.style.transform = "translateZ(" +high+ 'px)';
        oDiv.style.margin = -side/1.9/2 + 'px';
        oLi.appendChild(oDiv);

    }


</script>
</body>
</html>
